<template>
  <div class="saveUpdate">
    <el-dialog :close-on-click-modal="false" title="上传头像" :visible.sync="showDialog" @close="$emit('update:showUpdate', false)"
               :showUpdate="showUpdate" width="500px">
      <el-form :model="DetailInfo" ref="saveChn" label-width="8rem">

        <croppa  @file-choose="handlePictureCardPreview" :width='450' :height='450' :file-size-limit='1024000'
                placeholder="选择图片" :placeholder-font-size="16" v-loading="fullscreenLoading">></croppa>
        <p>图片可缩放 / 框内裁剪 / 图片大小不超过1024kb</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:showUpdate', false)" size="small">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="saveDetail" size="small" :disabled="fullscreenLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import DialogWrapper from '@/components/DialogWrapper'
  import { updateAgencyMenber ,getQiniuUploadToken,qiniuUpload} from '@/api'
  import {uuid} from '@/utils/uuid'
  export default {
    components: { DialogWrapper },
    data() {
      return {
        showDialog: this.showUpdate,
        loading: false,
        DetailInfo: {},
        newavatar: null,
        fullscreenLoading: false
      }
    },
    props: {
      showUpdate: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number
      },
      MerchantType: {
        type: Object
      },
      settleCycle: {
        type: Object
      },
    },
    created(){
      if(this.id){
        this.getDetail()
      }
    },
    methods: {
      handlePictureCardPreview(f) {
        if ( f.size > 1024000) {
          this.$message({type: 'error', message: '文件大小不能超过1024kb'})
        }
        this.fullscreenLoading = true;
         getQiniuUploadToken().then(res => {
                       if (res.status === 0) {
    //创建新文件对象（实现更名）
    var newfile = new File([f],uuid()+f.name.substring(f.name.lastIndexOf('.')),{type:"image/jpeg"});
                           let data = new FormData()
                           data.append('file', newfile)
                           data.append('key', newfile.name)
                           data.append('token', res.data.token)
                           qiniuUpload(data).then(res => {
                            this.newavatar = res.key
                            this.$message({ message: '上传成功。',type: 'success' })
                            this.fullscreenLoading = false;
                           })
                       }
                   })
      },
      saveDetail(){
        this.$refs.saveChn.validate(valid => {
          if (valid) {
            updateAgencyMenber({avatar:this.newavatar},this.$store.state.user.userinfo.id).then(res => {
              if(res.status === 0){
                this.$message({ message: '修改成功。',type: 'success' })
                this.$emit('update:showUpdate', false)
              }
            })
          }
        })
      }
    },
    watch: {
      showUpdate() {
        this.showDialog = this.showUpdate
      }
    }
  }
</script>
